<template>
    <el-container class="container">
      <el-aside style="width: 200px;margin-top: 20px">
        <!-- <switch></switch> -->
        <SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
      </el-aside>
      <el-main>
        <books class="books-area" ref="booksArea"></books>
        <!-- <ElementUi></ElementUi> -->
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </template>
  
  <script>
    import SideMenu from './SideMenu'
    import Books from './Books'
import ElementUi from './ElementUi.vue'
import Footer from './Footer.vue'
  
    export default {
      name: 'AppLibrary',
      components: { Books, SideMenu, ElementUi, Footer },
      methods: {
        listByCategory () {
          var _this = this
          var cid = this.$refs.sideMenu.cid
          let data =new FormData()
          data.append('cid',cid)
          this.$axios.post
            ('/categories/books', data).then(resp => {
            if (resp && resp.status === 200) {
              _this.$refs.booksArea.books = resp.data
            }
          })
        }
      }
    }
  </script>
  
  <style scoped>
    .books-area {
      width: 990px;
      margin-left: auto;
      margin-right: auto;
    }
    .container{
      
    }
    
  </style>
  
  